"use client"
import Content from '@/app/clients/page'
import styles from './page.module.scss'
import { useState } from 'react';
import { useParams } from 'next/navigation';
import Modal from './Modal'
export default function NewsCenter() {
  const { productId } = useParams();
  console.log(productId);
  const [imgIndex, setImgIndex] = useState(0)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({});
  const [type, setType] = useState('租用');

  return (
    <Content>
      <div className={styles['details']}>
        <div className={styles['main']}>
          <div className={styles["img"]}>
            <img src="/imgs/clients/3-2.jpg" alt="" width='100%' />
            <div className={styles["imgs"]}>
              {[1, 2, 3, 4, 5].map((v, i) => <img key={i} className={styles[i === imgIndex ? "active" : '']} src="/imgs/clients/3-2.jpg" alt="" width='100px' onClick={() => setImgIndex(i)} />)}
            </div>

          </div>
          <div className={styles["right"]}>
            <div className={styles['title']}>铅酸蓄电池</div>
            <div className={styles["line"]}></div>
            <p>电池类型&emsp;:<span>&nbsp;磷酸铁锂</span></p>
            <p>型&emsp;&emsp;号&emsp;:<span>&nbsp;LN-60</span></p>
            <p>容&emsp;&emsp;量&emsp;:<span>&nbsp;80kWh</span></p>
            <p>循环次数&emsp;:<span>&nbsp;200次</span></p>
            <p>所属电站&emsp;:<span>&nbsp;S001</span></p>
            <p>存放位置&emsp;:<span>&nbsp;LOC-S001-1</span></p>
            <p>循环次数&emsp;:<span>&nbsp;200次</span></p>
            <p>能量密度&emsp;:<span>&nbsp;180.5Wh/kg</span></p>
            <p>生产日期&emsp;:<span>&nbsp;2023-05-01</span></p>
            <p>质保日期&emsp;:<span>&nbsp;2026-05-01</span></p>
            <p>租金金额&emsp;:<span>&nbsp;800元/月</span></p>
            <button onClick={() => {
              setType('租用')
              setIsModalOpen(true)
            }}>我要租用</button>&emsp;
            <button onClick={() => {
              setType('购买')
              setIsModalOpen(true)
            }}>我要购买</button>
          </div>
        </div><Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} type={type} />
      </div>
    </Content>
  );
}
